Siguiendo el tema de días anteriores sobre mostrar texto oculto en una imagen otra vez hacemos uso de CSS y además de utilizar rollover también se utilizará la propiedad opacity.

Los estilos los podemos añadir en la plantilla antes de ]]></b:skin> pero debemos tener en cuenta que la imagen se añade en los estilos, es decir, que si vamos a utilizar este efecto en varias ocasiones con distinta imagen y distinto tamaño es conveniente añadir los estilos en la misma entrada cambiando el nombre de la clase.

Editamos nuestra entrada y añadimos el html que incluirá el texto:


<div class="rollover_img"><a title=""href="url-enlace-de-la-imagen">
<span> Texto...</span></a></div>

Al final de la entrada añadimos los estilos y la url de la imagen:

<style> .rollover_img {
width: 280px;
height: 150px;
background-image: url(url-imagen);
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}
.rollover_img a {
color: #fff;
width: 280px;
height: 150px;
display: block;
text-decoration: none;
}
.rollover_img a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);
}
.rollover_img a span {
display: none;
width: 280px;
padding:5px;
}
.rollover_img a:hover span {
display: block;
}
</style>



Si observamos los estilos veremos que la imagen tiene width: 280px (ancho) y height: 150px (alto) si por ejemplo creamos otra entrada y deseamos añadir una imagen distinta lo que haremos será añadir el ancho de nuestra imagen en width y el alto en height.
El ancho del contenido lo encontremos en width de rollover_img a span.
También tendríamos que cambiar el nombre de la clase por uno distinto porque de lo contrario esa nueva imagen que añadimos adquiere los estilos que tenemos añadidos y se mostraría la misma imagen repetidas veces.
Si añadimos la imagen 1 en una entrada y en los estilos le pusimos rollover.

.rollover_img {
.....
.....
.....
}

Para añadir una segunda imagen le ponemos otro nombre o una variante del mismo rolloverx.

.rolloverx_img {
.....
.....
.....
}

Ese cambio lo haríamos en todos los estilos, así como cambiar el tamaño de la imagen.










Felipe Calvo Cepeda

Es genial... se ve muy bonito :D
Ademas pienso que puede ser mas facil que estar posicionando Divs... no solo por tiempo... sino por el estilo tan elegante que queda al final.
Ahí queda entre los apuntes.. ;)

Responder
Edgar Rangel

ey que tal, soy nuevo en todos estos rollos y pues no se de plano como colocarlo en la entrada lo coloco pego y pongo el URL de la imagen pero no me aparece nada

espero me puedan ayudar pk me gusto mucho para lo que quiero exponer en mi blog espero y me puedan ayudar saludos

Responder
Gem@

:: Me alegra que te guste Felipe :)

:: Edgar Rangel ¿puedo ver un ejemplo de eso que comentas?

Responder
Henry Herrera

Que bonita imagen la de la chica y el efecto también esta de lujo y se ve que no es difícil de implementar(en las plantillas viejitas, claro esta). Que tengas un feliz fin de semana y cuidado con las copas (pero no las de futbol)

Responder
Unknown

Llevo tiempo queriendo hacer eso en mi blog, y no daba con la forma... parece hasta sencillo (el CSS, no es lo mio)

Un saludo y enhorabuena por el blog!

Chema

PD: me lo guardo en favoritos, con tu permiso ;)

Responder
Gem@

:: Henry es un efecto sencillo que da mucho juego.
Las copas con moderación no hacen daño y si no se consumen mucho menos :)

:: Bienvenido Chema, he quedado asombrada con tu blog, tiene un diseño muy particular y bien cuidado, del trabajo con el coche todo un arte, si no es tu profesión menuda mañana tienes.
Por otra parte quise ver tu ficha del concurso y me encuentro que la imagen que tienes no enlaza con ella, así se hace compilado si tus visitas desean votar tu blog seguramente lo hagan desde la imagen no desde ese enlace chiquito que dice Motor.

Responder
Gem@

:: Perdón, donde compilado era complicado :S

Responder
Gem@

:: El enlace ideal sería este Chema:
http://lablogoteca.20minutos.es/mi6cientosblog-737/0/

Responder
Vku

Realmente me alegro ver como se esta utilizando mas los efectos con CSS y ver como se puede hacer muchas cosas con un poco de imaginación.
Un beso Gem@

Responder
Gem@

:: Pues vienen tiempos mejores Vku vamos a poder hacer muchas cosas más :D

Responder
Karla Castañeda

Me lo llevo Gema, me encantan los efectos donde ahorres en el script jaja


Que tengas un excelente día!

Responder
Cooperadora Hogar Crecer

Hola Gem@!
precioso este efecto y también el anterior con texto oculto.
No lo logré con los estilos en la entrada, pero no es complicado cambiar la clase y ponerlos en la plantilla. Así que ya está preparado para cuando llegue la ocasión de usarlo.

Un cálido abrazo!

Responder
José GDF

Yo creo que es mejor, para estos casos, usar CSS integrado en el HTML, o si no la hoja de estilos se haría eterna.

Un ejemplo:

<div style="AQUI LOS ESTILOS, SEPARADOS POR PUNTO Y COMA">Aqui el contenido</div>

Después, para el efecto hover, habría que añadir, detrás, al final de la entrada:

<style type="text/css">
.clase:hover {
AQUI LOS ESTILOS PARA CUANDO PASAS EL RATON

}
</style>

O meter simplemente toda la hoja de estilos necesaria en la entrada, pero solo en el caso de que las imágenes sean de diferentes tamaños y/o estilos.

No sé... Hay tantas maneras de conseguir lo mismo... :S

Ahora me has dejado con la duda, no se si usar esta solución o la de la otra entrada, con JQuery... :p

Responder
Gem@

:: Que tengas un buen día Karla :)

:: Hogar CRECER, el añadirlos en la entrada es para no recargar la plantilla y porque de esa forma queda como más ordenado, cada entrada con sus propios estilos, pero lo que importa es que funcione bien y si lo has conseguido estupendo!! :)

:: José GDF en general lo más sencillo es añadirlos a la plantilla, pero es verdad que a la larga se puede hacer interminable, precisamente por eso digo que se pueden añadir en la misma entrada :)
Si añadimos los estilos en la entrada el resultado es el mismo de ir en el html o independientes creo, porque ni ocupan espacio ni alteran el efecto.
Menudo dilema tienes jajajajaja si añades los dos?

Responder
Allan Fixnet Uster

Desculpe-me o termo mas PQP amiga que dica explendida!
I LOVE YOU!
Te conheci pela fantastica Ariane,a formidavel Rosangela minha rainha.
Meu DEUS você é fantastica amiga lindaaa!!!

Responder
Gem@

:: Gracias Taillard :)

Responder
Raymundo de Castro

GEMA, Eu gosto de tudo que você ensina. É muito didático e até eu que há pouco tempo não sabia nem o que era Blog, já faço coisas que me surpreendo. Você em especial e mais alguns que não sei se poderia citar o nome, são os responsáveis pelo sucesso do meu blog. Sinceramente, muito obrigado e que as forças positivas estejam sempre com você.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top